<!DOCTYPE HTML>
<html>

<!-- Modified from: https://www.w3schools.com/HTML/tryit.asp?filename=tryhtml5_draganddrop -->

<head>
    <style>
        #target {
            width: 350px;
            height: 70px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <script>
        function allowDrop(ev) {
            ev.preventDefault();
        }

        function drag(ev) {
            ev.dataTransfer.setData("text", ev.target.id);
        }

        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>

<body>
    <div id="target" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img id="draggable" src="https://www.w3schools.com/html/img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
</body>

</html>